<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="referrer" content="no-referrer" />
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <title></title>
  <script src="./es/dom-to-image.js" type="module"></script>

  <style>
    /* @font-face {
      font-family: LiuJianMaoCao-Regular;
      src: url('LiuJianMaoCao-Regular.ttf');
    } */

    @font-face {
      font-family: MesloLG;
      src: url("MesloLGS-NF-Bold.ttf");
    }

    .c-m-box {
      width: 600px;
    }

    .title {
      padding: 10px 0;
      font-size: 20px;
      font-weight: 600;
    }

    .c-m-img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: solid 1px gray;
      box-shadow: 5px 8px 5px black;
      filter: 0.5;
    }

    .outline {
      outline: 2px solid red;
      outline-offset: -2px;
    }

    .c-m-list {
      width: 600px;
      height: 250px;
      /* background-color: aliceblue; */
    }

    .img-list {
      display: flex;
      justify-content: space-between;
    }

    .c-m-name {
      font-size: 15px;
      color: blue;
    }

    .c-m-title {
      font-size: 12px;
      color: indianred;
      /* font-family: LiuJianMaoCao-Regular; */
    }

    .en-txt {
      font-size: 12px;
      color: rgb(177, 57, 77);
      font-family: MesloLG;
    }

    .btn-list {
      display: flex;
      justify-content: space-around;

    }

    .img-type {
      color: blueviolet;
      font-size: 16px;
    }

    .img2 {
      position: relative;
      width: 130px;
      height: 130px;
      background: url(https://car3.autoimg.cn/cardfs/motobike/g9/M09/6F/D6/640x480_autohomecar__ChsEhWFj9T6ANDJPAAuHoGjRkto243.jpg.webp) center center no-repeat;
      background-size: contain;
      border: 1px solid blue;
      border-radius: 50%;
      zoom: 1.2;
    }

    .img2::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: red;
      z-index: -1;
    }

    .img3 {
      /* display: flex;
      justify-content: center;
      align-items: center; */
      width: 160px;
      height: 160px;
      filter: blur(4px);
    }

    .img3>img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    input {
      margin-top: 20px;
      display: block;
      width: 100px;
      border: 1px solid gray;
      box-shadow: 3px 3px red, -1px 1px olive;
    }

    .btn-list {
      padding-bottom: 10px;
    }
  </style>
  <style>
    .test {
      color: red;
    }

    @font-face {
      font-family: "Al-Black";
      font-weight: 1000;
      src: url("//at.alicdn.com/wf/webfont/QBa4l4xvmwzg/-xLe239h9x-gXbqAqlxsa.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/QBa4l4xvmwzg/pYI44mTrOmZ5yzTP60GEq.woff") format("woff");
      font-display: swap;
    }

    .flex-b {
      display: flex;
      justify-content: space-between;
    }

    .c-txt {
      font-size: 12px;
      color: blueviolet;
      font-family: Al-Black;
    }
  </style>
</head>

<body>

  <div id="cmBox" class="c-m-box">
    <div class="title">ts-dom-to-image => es 测试示例</div>
    <div class="c-m-list">
      <div class="img-list">
        <img src="./img/moto.png" alt="" class="c-m-img">
        <div class="img2"></div>
        <div class="img3">
          <img style="border:1px solid pink"
            src="//m1.autoimg.cn/newsdfs/g26/M04/6A/D9/516x264_autohomecar__ChwFkGFmq8OAAmCSAAaQ44fMmNY598.png.webp"
            alt="" crossOrigin="anonymous" />
        </div>
      </div>
      <input value="" />
      <div class="flex-b">
        <div class="c-m-title">自动生成 <i class="img-type"></i> 图片...</div>
        <div class="c-txt">测试跨域自定义字体ABC</div>
        <div class="en-txt">Test Web Font</div>
      </div>
    </div>
    <div class="btn-list">
      <button class="button" onclick="createImg('toSvg')">生成SVG图片</button>
      <button class="button" onclick="createImg('toJpg')">生成JPG图片</button>
      <button class="button" onclick="createImg('toPng')">生成PNG图片</button>
      <button class="button" onclick="createImg('toCanvas')">生成canvas展示</button>
      <button class="button" onclick="createImg('toBlob')">生成toBlob图片</button>
    </div>
  </div>
  <script type="module">
    import DomToImage from './es/dom-to-image.js';
    console.log(DomToImage)
    var node = document.querySelector('.c-m-list')
    window.domtoimage = new DomToImage({ targetNode: node, bgColor: '#fff' });
  </script>
  <script type="text/javascript">

    //imagePlaceholder:'https://www.pngkey.com/png/detail/233-2332677_image-500580-placeholder-transparent.png'
    function createImg (type) {
      document.querySelector('.img-type').innerHTML = type.replace('to', '')
      window.domtoimage[type]()
        .then(function (dataUrl) {
          if (!dataUrl) return
          if (type === 'toCanvas') {
            document.body.appendChild(dataUrl);
          } else if (type === 'toSvg') {
            // console.log(dataUrl);
            // const svg = dataUrl.replace('data:image/svg+xml;charset=utf-8,', '').replace(/\%0A/g, '');
            document.body.appendChild(dataUrl);
          }
          else {
            if (type === 'toBlob') {
              dataUrl = URL.createObjectURL(dataUrl)
              console.log(dataUrl);
            }
            const img = new Image();
            img.src = dataUrl;
            // document.body.appendChild(img);
            // document.body.appendChild(document.createElement('br'));
            img.onload = () => {
              document.body.appendChild(img);
              document.body.appendChild(document.createElement('br'));
            }
          }

        })
        .catch(function (error) {
          console.error('oops, something went wrong!', error);
        });
    }

    function createDocumentFragment (txt) {
      // const template = `<div class='child'>${txt}</div>`;
      let frag = document.createRange().createContextualFragment(txt);
      return frag;
    }
  </script>
</body>

</html>